import React, { useState } from "react";
import classNames from "classnames";
import Icon from '../Icon/icon'

export enum AlertType {
  Success = "success",
  Default = "default",
  Danger = "danger",
  Warning = "warning",
}

interface BaseAlertType {
  alertType: AlertType;
  children?: React.ReactNode;
  className?: string;
  title?: string;
  message: React.ReactNode;
  closable?: boolean; //是否关闭
  style?: object;
}

type AlertProps = BaseAlertType & React.DOMAttributes<HTMLElement>;

const Alert: React.FC<AlertProps> = (props) => {
  const [isOpen, setOpen] = useState("block");
  const {
    alertType,
    className,
    title,
    message,
    closable,
    style,
    ...resProps
  } = props;
  const classes = classNames("zs-alert", className, {
    [`zs-alert-${alertType}`]: alertType,
   
  });
  const changeOpen = (e:React.MouseEvent) => {
    e.preventDefault()
    setOpen("none");
  };
  return (
    <div style={{...style,display:isOpen}} className={classes} {...resProps}>
      <div className="zs-alert-title">
        <span>{title}</span>
        <span
          onClick={changeOpen}
          className={closable ? "zs-alert-open" : "zs-alert-close"}
        >
          <Icon icon="times" theme="dark"/>
        </span>
      </div>
      <div className="zs-alert-message">{message}</div>
    </div>
  );
};

Alert.defaultProps = {
  alertType: AlertType.Success,
  closable: false,
};

export default Alert;
